<template>
  <div>
    <div class="ke__margin">
      <select v-model="province" placeholder="省份" clearable>
        <option v-for="item in provinces"
                :key="item.id"
                :value="item.id">
          {{ item.name }}
        </option>
      </select>

<!--      <select v-if="province" v-model="city" placeholder="城市" clearable>-->
<!--        <option v-for="item in citys"-->
<!--                :key="item.id"-->
<!--                :value="item.id">-->
<!--          {{ item.name }}-->
<!--        </option>-->
<!--      </select>-->
    </div>

    <k-form ref="form" @submit="onClickSave" class="ke__padding">
      <el-table :data="showList" v-loading="loading">
        <el-table-column width="65" label="删除?" align="center">
          <template slot-scope="{ row, $index }">
            <el-checkbox :value="deleteId.indexOf(row.id) > -1"
                         @change="onChangeDelete($event, $index)"/>
          </template>
        </el-table-column>

        <el-table-column label="地区名称">
          <template slot-scope="{ row }">
            <el-input v-model="row.name" @input="onInput(row, 'name', $event)"/>
          </template>
        </el-table-column>

        <el-table-column label="显示顺序" width="100">
          <template slot-scope="{ row }">
            <el-input v-model="row.sort" @input="onInput(row, 'sort', $event)"/>
          </template>
        </el-table-column>
      </el-table>

      <div class="ke__margin-top">
        <el-button type="primary" :loading="subing" native-type="submit">保存</el-button>
      </div>
    </k-form>
  </div>
</template>

<script>
  import { Vue, Component } from 'vue-property-decorator'
  @Component
  export default class AreaIndex extends Vue {
    list = []
    inserts = [] // 需要插入的数据
    updates = [] // 需要更新的数据
    deleteId = [] // 需要删除的数据
    loading = true
    subing = false
    lv = 1
    province = null
    city = null
    country = null

    // 当前显示列表
    get showList() {
      let lv = this.lv
      if (this.country) {
        lv = 3
      } else if (this.city) {
        lv = 3
      } else if (this.province) {
        lv = 2
      }
      let data = this.$store.getters['area/list'].filter((item) => {
        return item.level === lv
      })
      return data.concat(this.inserts)
    }

    // 省份
    get provinces() {
      return this.$store.getters['area/province']
    }

    // 城市
    get citys() {
      return this.$store.getters['area/city'].filter((item) => {
        return item.pid === this.province
      })
    }

    // 省份
    get countrys() {
      return this.$store.getters['area/country'].filter((item) => {
        return item.pid === this.city
      })
    }

    mounted () {
      this.inserts.push({
        _id: KE.timestamp()
      })
      this.onLoad()
    }

    // 加载列表数据
    onLoad () {
      this.loading = true
      this.$http.get('admin/area')
        .finally(() => this.loading = false)
        .then(result => {
          this.list = result.list.map((item) => {
            item.stateText = item.is_disabled ? '禁用' : '启用'
            return item
          })
        })
    }

    // 输入回调
    onInput (row, column, value) {
      if (row.id) {
        const idx = this.updates.findIndex(item => item.id === row.id)
        if (idx === -1) {
          this.updates.push({
            id: row.id,
            [column]: value
          })
        } else {
          KE.array.update(this.updates, row.id, {
            [column]: value
          })
        }
      }

      if (column === 'name' && value) {
        const idx = this.inserts.findIndex(item => item._id === row._id)
        if (idx === this.inserts.length - 1) {
          this.inserts.push({
            _id: KE.timestamp()
          })
        }
      }
    }

    // 删除勾选
    onChangeDelete (val, idx) {
      if (this.showList[idx].id) {
        if (val) {
          this.deleteId.push(this.showList[idx].id)
        } else {
          this.deleteId.splice(this.showList[idx].id, 1)
        }
      } else {
        KE.array.update(this.inserts, this.showList[idx]._id, {
          _delete: val
        }, '_id')
      }
    }

    // 提交保存
    onClickSave () {
      let form = {
        inserts: this.inserts.filter((item) => {
          return !item._delete && item.name
        }),
        updates: this.updates,
        deletes: this.deleteId
      }
      if (form.inserts.length === 0 && form.updates.length === 0 && form.deletes.length === 0) {
        this.$message.error('没有更改,无需更新')
        return
      }
      this.subing = true
      this.$http.post('admin/area/save', form)
        .finally(() => this.subing = false)
        .then((result) => {
          if (result.res_code === 0) {
            this.$message.success('保存成功')
            this.inserts = [{
              _id: KE.timestamp()
            }]
            this.updates = []
            this.deleteId = []
            this.onLoad()
          } else {
            this.$message.error(result.res_msg)
          }
        })
    }
  }
</script>

<style scoped lang="scss">
  .el-select + .el-select {
    margin-left: 20px;
  }
</style>
